<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>订单操作</title>
    <link rel="stylesheet" href="/css/supplies/bootstrap.min.css">
    <link rel="stylesheet" href="/icon/css/font-awesome.min.css">
    <link rel="stylesheet" href="/js/supplies/bootstrap-table/bootstrap-table.min.css"/>
    <link rel="stylesheet" href="/css/supplies/common.css"/>
    <link rel="stylesheet" href="/css/supplies/myOrder/myorder.css">
    <link rel="stylesheet" href="/css/supplies/model.css">
    <style>
        input::-webkit-outer-spin-button,
        input::-webkit-inner-spin-button {
            -webkit-appearance: none;
        }
        input[type="number"]{
            -moz-appearance: textfield;
        }
        #list_comment {
            margin-top: 10px;
        }

        .price {
            padding-left: 0px;
            max-width: 43px;
        }

        ul li label {
            margin-right: 20px;
        }

        .line {
            width: 10px;
            margin-top: 18px;
            border-bottom: 1px solid black;
        }

        .active {
            background-color: #FFECE0;
            border: 1px solid #FF6A0E;
            text-align: center;
        }

        .active-bg-color {
            color: #FF6A0E;
        }

        .noActive {
            background-color: #F2F2F2;
            border: 1px solid #f2f2f2;
        }

        .bootstrap-table thead {
            background-color: #FFEDDF;
        }
        .price_input{
            height: 44px;
            border-left: none;
        }
        .input-group-addon:first-child{
            border: 1px solid #DEDEDE;
        }
        select {
            border-radius: 3px;
            padding: 3px 0
        }

        input[type="radio"], input[type="checkbox"] {
            margin-right: 3px;
        }

        td {
            padding: 1%;
            width: auto;
            font-size: 14px
        }

        a {
            color: #0e66ac
        }

        label {
            font-weight: 200;
        }

        .table thead tr th, td {
            text-align: center;
            height: 60px;
        }
        .table>tbody>tr>td{
            padding: 20px 0;
        }
        #choose li .label {
            position: relative;
            border: 1px solid #DEDEDE;
            background-color: white;
            height: 44px;
            min-width: 160px;
            font-weight: 100;
            font-size: 14px;
            color: #999999;
            line-height: 17px;
            padding: 3px 10px;
            text-align: left;
        }
        .fa-caret-down{
            position: absolute;
            color: #666;
            margin: 0;
            font-size: 20px;
            top: 10px;
            right: 10px;
        }
        .activeSelected {
            background-color: #F5F5F5;
        }

        .checkbox {
            width: 20px;
            height: 20px;
            display: none;
        }

        .order-btn {
            float: left;
        }

        .order-btn .order-static-btn{
            cursor: pointer;
            width: 100%;
            text-align: center;
            border: none;
            color: #fff;
            padding: 2px 10px;
            font-size: 14px;
            background: linear-gradient(to right, #FE5004, #FF9B02);
        }
        .order-btn .order-static-btn .title_en{
            color: #fff;
        }

        .floatright {
            float: right;
        }

        .input-group-addon {
            border-radius: 0px;
        }

        .form-control {
            border-radius: 0px;
        }

        .bg-color {
            color: #999999;
        }

        .bg-color-table {
            color: #666666;
        }

        .select_a {
            height: 32px;
            width: 140px;
            font-size: 14px;
            line-height: 30px;
        }

        .text-height {
            margin-top: 10px;
        }

        .input_check_span {
            position: relative;
            top: 20px;
            left: 5px;
        }

        .input_check {
            display: none;
        }

        .input_check_span label {
            padding-left: 19px;
            cursor: pointer;
            position: absolute;
            height: 18px;
            top: 0;
            left: -10px;
            width: 19px; /* 如果没有文字，打开这段样式*/
            background: white;
            border: 1px solid #DEDEDE;
        }

        .input_check_span label::after {
            content: '';
            opacity: 0; /*设置复选框标签透明度0.2,半透明的对勾 下面悬停时候加深*/
            position: absolute;
            width: 14px;
            height: 10px;
            background: transparent;
            /*top: 3px;*/
            left: 3px;
            border: 1px solid #FF6A0E;
            border-top: none;
            border-right: none;
            -webkit-transform: rotate(-45deg);
            -moz-transform: rotate(-45deg);
            -o-transform: rotate(-45deg);
            -ms-transform: rotate(-45deg);
            transform: rotate(-45deg);
        }

        .input_check_span label:hover::after {
            opacity: 0;
        }

        .input_check_span input[type=checkbox]:checked + label:after { /*checkbox选中后，设置相邻元素对勾为不透明*/
            opacity: 1;
        }
        .input_check_span input[type=checkbox]:checked + label{
            border: 1px solid #FF6A0E;
        }
        .input-group .form-control {
            height: 44px;
        }

        .input-group-addon {
            background-color: #fff;
            border: 1px solid #DEDEDE;
        }

        .form-control {
            border: 1px solid #DEDEDE;
        }

        #tr {
            float: left;
            width: calc(100% - 115px);
            height: 44px;
            padding-left: 20px;
            padding-right: 20px;
        }

        #tr .order-btn {
            width: calc(100% / 5 - 20px);
            margin-right: 20px;
        }

        /*修改 layer 弹出框样式 */
        .layui-layer-btn .layui-layer-btn0{
            margin-right: 20px;
            color: #fff;
            width: 140px;
            height: 32px;
            text-align: center;
            line-height: 30px;
            background: -webkit-linear-gradient(left,  #FE5004,#FF9B02);
            border: 0;
        }
        .layui-layer-btn a{
            border: 0;
        }
        .layui-layer-btn .layui-layer-btn1{
            margin-right: 20px;
            color: #666;
            background-color: white;
            width: 140px;
            height: 32px;
            text-align: center;
            line-height: 30px;
            border: 1px solid #DEDEDE;
        }
        .pad-1{
            padding: 10px;
        }
        .pad-2{
            padding: 20px;
        }
        .row p{
            font-size: 14px!important;
        }
        .line-h-40{
            line-height: 40px;
        }
        .model_tip_title{
            float: none;
            text-align: center;
        }
        .model_info_cont {
            font-size: 14px;
        }
        .model_content {
            top: 225px;
            width: 700px;
            height: auto;
        }
        .my_enal_text{
            padding: 20px;
            width: 600px;
            position: relative;
        }
        .my_enal_text .placeholder{
            position: absolute;
            padding: 5px;
            top: 35px;
            width: 100%;
            height: 100%;
            color: #DCDCDC;
        }
        .comment-left{
            float: left;
            margin-right: 40px;
            font-size: 14px;
        }
        .comment-left div img{
            margin-right: 5px;
        }
        .btn-2{
            width: 140px;
            text-align: center;
            line-height: 32px;
        }
    </style>
</head>
<body>
<!--评价框-->
<div class="model_box collection_confirm_box">
    <div class="model_content ">
        <div class="model_info">
            <div class="model_info_title">
                <div class="close_model_box b" onclick="closeEvaluation()"><div >&times;</div></div>
                <div class="model_tip_title">
                    <div class="font_size_16">填写评价</div>
                    <div class="font_size_16 color-6">please enter feedback</div>
                </div>
            </div>
            <div class="model_info_cont">
                <div >
                    <div class="comment-left">评价内容<br>content of feedback</div>
                    <div class="comment-left" style="height: 46px;margin-top: 10px">
                        <div id="half-demo1" ></div>
                    </div>
                </div>
                <div class="row top">
                    <div class="my_enal_text">
                        <div class="placeholder">请填写评价内容<br/>please enter feedback</div>
                        <textarea class="form-control input_placeholder" style="outline: none;resize: none" id="evContent" rows="5" v-text="content"></textarea>
                    </div>
                </div>
            </div>
        </div>
        <div class="model_bottom_bar" id="submitEvCt">
            <div class="btn-2 font_size_14" style="margin: 0 auto">确认(determine)</div>
        </div>
    </div>
</div>
<div class="head_top"></div>
<div id="list_comment">
    <div class="container-fluid">
        <div class="row" style="background-color: white;font-size: 14px">
            <div class="col-md-6 pad-2">
                <div class="row" style="padding-left: 20px; ">
                    <div class="col-md-2 pad-1">
                        <p> 联系人</p>
                        <p>Contact</p>
                    </div>
                    <div class="col-md-6 pad-1 line-h-40">{{orderList.user_name}}</div>
                </div>
                <div class="row" style="padding-left: 20px; ">
                    <div class="col-md-2 pad-1">
                        <p>联系电话</p>
                        <p>number</p>
                    </div>
                    <div class="col-md-6 pad-1 line-h-40">{{orderList.user_tel}}</div>
                </div>
            </div>
            <div class="col-md-6 pad-2">
                <div class="row" style="padding-left: 20px; ">
                    <div class="col-md-2 pad-1">
                        <p>收货地址</p>
                        <p>Contact</p>
                    </div>
                    <div class="col-md-6 pad-1" style="margin-top: 10px">{{orderList.user_addr}}</div>
                </div>
                <div class="row" style="padding-left: 20px; ">
                    <div class="col-md-2 pad-1">
                        <p>配送时间</p>
                        <p>number</p>
                    </div>
                    <div class="col-md-6 pad-1 line-h-40">{{orderList.send_time}}</div>
                </div>
            </div>
        </div>
    </div>
    <div class="form-body" >
        <div style="background-color: #fff">
            <table class="table table-hover table-responsive" id="operation_order_table" style="margin-bottom: 0px">
                <thead>
                <tr >
                    <th data-field="num" style="width: 20%">
                        <div class="th-inner font-size-14 bg-color-table">订单编号<br>order number</div>
                    </th>
                    <th data-field="name" style="width: 15%">
                        <div class="th-inner font-size-14 bg-color-table">商品名<br>Product name</div>
                    </th>
                    <th data-field="orderTime" style="width: 15%">
                        <div class="th-inner font-size-14 bg-color-table">价格<br>price</div>
                    </th>
                    <th data-field="contactNum" style="width: 15%">
                        <div class="th-inner font-size-14 bg-color-table">数量<br>number</div>
                    </th>
                    <th data-field="status" style="width: 10%">
                        <div class="th-inner font-size-14 bg-color-table">是否优惠<br>contact number</div>
                    </th>
                    <th data-field="status" style="width: 10%">
                        <div class="th-inner font-size-14 bg-color-table">总价<br>Order  Status</div>
                    </th>
                </tr>
                </thead>
                <tbody id="datas" style="border-bottom: 1px solid #ddd">
                <tr data-index="0" v-for="item in productList">
                    <td style="text-align: left;width: 23%;min-width: 330px" >
                        <img style="width: 80px;height: 80px" :src="url +item.image" />
                        <span v-text="orderList.order_no" class="font_size_16" style="overflow: hidden"></span>
                    </td>
                    <td v-text="item.name" style="width: 23%;min-width: 330px"></td>
                    <td v-text="item.price" class="td"></td>
                    <td v-text="item.num"></td>
                    <td v-if="orderList.discountmoney == 0">no</td>
                    <td v-else>yes</td>
                    <td v-text="item.total"></td>
                </tr>
                </tbody>
            </table>
            <div class="pagearea" style="border-bottom: 1px solid #ccc">
                <div class="order-btn noActive " style="margin-left: 10px;float: right" @click="orderOpt(orderList.id,'6')" v-if="orderList.status < 3">
                    <div class="order-static-btn">
                        <div class="title_zh">取消订单</div>
                        <div class="title_en">cancel a order</div>
                    </div>
                </div>
                <div class="order-btn noActive " style="margin-left: 10px;float: right" @click="orderOpt(orderList.id,'2')" v-if="orderList.status == 1">
                    <div class="order-static-btn">
                        <div class="title_zh">确认订单</div>
                        <div class="title_en">confirm a order</div>
                    </div>
                </div>
                <div class="order-btn noActive " style="margin-left: 10px;float: right" @click="orderOpt(orderList.id,'3')" v-if="orderList.status == 2">
                    <div class="order-static-btn">
                        <div class="title_zh">配送完成,去评价</div>
                        <div class="title_en">evaluation order</div>
                    </div>
                </div>
                <div class="order-btn noActive " style="margin-left: 10px;float: right" v-if="orderList.status >= 3 && orderList.is_supplier_comment == 0 && orderList.status != 6" onclick="openEvaluation()">
                    <div class="order-static-btn">
                        <div class="title_zh">评价</div>
                        <div class="title_en">feedback</div>
                    </div>
                </div>
            </div>
            <div style="clear: both"></div>
        </div>
    </div>
</div>
<div class="page-body-footer"></div>
<!--获取商户端id-->

</body>
<script src="/js/supplies/jquery.min.js"></script>
<script src="/js/supplies/bootstrap.min.js"></script>
<script src="/js/supplies/bootstrap-table/bootstrap-table.min.js"></script>
<script src="/js/supplies/common.js"></script>
<script src="/js/supplies/common_input.js"></script>
<script src="/js/supplies/vue.min.js"></script>
<script src="/js/supplies/vue-resource.js"></script>
<script src="/js/star/js/jquery.raty.min.js"></script>
<script rel="script" src="/js/supplies/axios.js"></script>
<script rel="script" src="/js/layer.js"></script>
<script>
    $(function () {
        showStar();
    });
    var app = new Vue({
        el: "#list_comment",
        data: {
            orderList: [],
            productList: [],
            supplier_id:'',
            user_id:'',
            order_id:'',
            content:'',
            url:oss_url
        },
        methods: {
            //显示订单列表
            req: function () {
                var url  = '__APP__/apishop/index/getOrderSet';
                var data = {
                    supplier_id:    this.supplier_id,
                    order_id:       this.order_id
                };
                this.$http.post(url, data, {
                    emulateJSON: true
                }).then(function (res) {
                    this.orderList      = res.body['orderList'];
                    this.productList    = res.body['productList'];
                    this.user_id        = this.orderList.user_id;
                }, function (res) {

                });
            },
            orderOpt:function(id,tag){
                var data = {
                    id:   id,
                    tag:  tag
                };
                var url = '__APP__/apishop/index/changeOrderStatusWeb';
                app.$http.post(url,data, {
                    emulateJSON: true
                }).then(function (res) {
                    if (tag == 2 || tag == 6){
                        layer.msg(res.data.msg,{
                            skin:'winning-class',//自定义样式winning-class
                            time:3000
                        });
                        this.req();
                    }
                    if (tag == 3 && res.data.status == 200){
                        $('.collection_confirm_box').fadeIn(300);
                    }else {
                        layer.msg(res.data.msg,{
                            skin:'winning-class',//自定义样式winning-class
                            time:3000
                        });
                    }
                }, function (res) {

                });
            }
        },
        mounted: function () {
            this.supplier_id    = localStorage.getItem("suppliesId");
            this.order_id       = localStorage.getItem("orderId");
            this.req();
        }
    });
    /*
   *点击提交评论内容
   */
    $('#submitEvCt').click(function(){
        $.ajax({
            type: "post",
            url: '__APP__/apishop/index/addComment', //后台处理程序
            //dataType: 'json',   //接受数据格式
            data:{
                order_id:       app.order_id,
                supplier_id:    app.supplier_id,
                user_id:        app.user_id,
                star:           $("input[name='score']").val(),
                comment:        $('#evContent').val()
            },     //要传递的数据
            success:function (res) {
                if(200 == res.status){
                    $('.collection_confirm_box').fadeOut(300);
                }
                app.req();
                layer.msg(res.msg,{
                    skin:'winning-class',//自定义样式winning-class
                    time:3000
                });

            },
            error: function () {
                layer.msg("error",{
                    skin:'winning-class',//自定义样式winning-class
                    time:3000
                });
            }
        });
        $('.collection_confirm_box').fadeOut(300);
    });

    /*
     * @description : 显示星级评分
     * @params:
     * @author : peng huaneng
     * @date : 2018/1/31 9:51
     */
    function showStar() {
        $('#half-demo1').raty({
            path: '/js/star/img',
            size: 40,
            starOff: 'star-off.png',
            starOn: 'star-on.png'
        });

    }
    //打开评价框
    function openEvaluation() {
        $('.collection_confirm_box').fadeIn(300);
    }
    //关闭评价框
    function closeEvaluation() {
        $('.collection_confirm_box').fadeOut(300);
        app.req();
    }
</script>
</html>